<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/14
  Time: 13:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加新闻界面</title>
    <!--引入elementui的样式-->
    <!-- 引入外部样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入相关插件，也叫依赖-->
    <!--引入vue的依赖，必须在elementui之前引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style>
        #addNews{
            width: 600px;
        }
        #xinwen{
            width: 300px;
            line-height:5;
        }

    </style>
</head>
<body>
<div id="app">

    <%-- 添加新闻 --%>
    <div id="addNews">
        <el-form ref="addFormRef" :model="addForm" label-width="110px">
            <el-form-item label="新闻标题" prop="newsTitle">
                <el-input v-model="addForm.newsTitle" id="xinwen" class="ab"></el-input>
            </el-form-item>
            <el-form-item label="新闻发布者" prop="newsAuthor">
                <el-input v-model="addForm.newsAuthor" id="xinwen" class="ab"></el-input>
            </el-form-item>
            <el-form-item label="新闻类别" prop="kindId">
                            <el-select v-model="addForm.kindId"  placeholder="请选择新闻类别" style="width: 300px" class="ab">
                                <el-option

                                        v-for="item in news"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">

                                </el-option>
                            </el-select>
            </el-form-item>
            <el-form-item label="新闻发布时间" prop="newsTime">
                <el-date-picker
                        v-model="addForm.newsTime"
                        type="datetime"
                        id="xinwen"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            </el-form-item>

            <el-form-item label="新闻发布内容" prop="newsContent">
                <el-input type="textarea"
                          v-model="addForm.newsContent"
                          id="xinwen"
                          class="ab">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSubmit()">上传</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </div>


</div>
</body>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            //定义添加新闻表单的数据变量
            addForm:{},
            //定义所有新闻信息对象
            news:[],
        },
        created(){
            this.initTable();
        },
        methods:{
            initTable(){
                axios.get("/kind/list").then(resp=>{
                    this.news=resp.data.data;
                })
            },
            renderTime(date) {
                var dates = new Date(date).toJSON();
                return this.news.newsTime= new Date(+new Date(dates) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')

            },
            addSubmit(){
               this.addForm.newsTime = this.renderTime( this.addForm.newsTime);
               // console.log( this.addForm.newsTime)

               console.log( this.addForm)
                axios.post("/news/add",this.addForm).then(resp=>{
                    if(resp.data.code === 200){
                        location.href="/newAudit.jsp";
                        this.$message.success("上传成功");
                        this.$refs.addFormRef.resetFields();

                    }
                })
            },

        }
    });
</script>
</html>